<template>
  <div class="page">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/dynamic/construction' }"
        >协会动态</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/dynamic/live' }"
        >项目直播</el-breadcrumb-item
      >
      <el-breadcrumb-item
        ><span style="color: #000">项目直播详情</span></el-breadcrumb-item
      >
    </el-breadcrumb>

    <div class="content">
      <div class="header">
        <div class="titel">
          {{ details.roomName }}
        </div>
        <p>
          直播时间:
          <span> {{ details.startTime | formatTime }}</span>
          -
          <span> {{ details.endTime | formatTime }}</span>
        </p>
      </div>
      <div class="video">
        <video :src="details.mediaUrl" controls autoplay height="444"></video>
      </div>
      <div class="more" v-if="list.length">
        <div class="titel">更多直播</div>
        <div class="box">
          <div v-for="(item, index) in list" :key="index" class="dynamic-item">
            <div @click="jump(item)" class="item">
              <el-card shadow="hover">
                <img
                  class="bgimg"
                  v-if="item.coverImg"
                  :src="$store.state.baseUrl + item.coverImg"
                  alt=""
                />
                <img v-else class="bgimg" src="@/assets/default.jpg" alt="" />
                <img class="playBtn" src="@/assets/playCircle.svg" alt="" />
                <div class="info">
                  <p class="titel">{{ item.roomName }}</p>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="notData"><span>暂无更多</span></div>
      <el-pagination
        v-if="list.length"
        class="pagination"
        background
        @current-change="handleCurrentChange"
        :page-size="pageParams.pageSize"
        layout="prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>

      <el-dialog
        v-if="ewm && dialogVisible"
        title="请扫码进入直播间"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <img :src="ewm" style="width: 280px; height: 280px" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/home.js";
export default {
  name: "LiveDetail",
  data() {
    return {
      dialogVisible: false,
      ewm: "", //直播间二维码
      details: "",
      list: [],
      count: "",
      pageParams: {
        pageSize: 10,
        pageNum: 1,
        roomId: "",
      },
    };
  },
  mounted() {
    this.details = this.$route.params.value;
    this.pageParams.roomId = this.details.roomId;
    this.getData(this.pageParams);
  },
  methods: {
    getData(params) {
      api.getLiveRoomPage(params).then((res) => {
        this.count = res.count;
        this.list = res.data;
      });
    },
    jump(val) {
      //回放
      if (val.liveStatus == 103) {
        this.details = val;
        this.pageParams.roomId = val.roomId;
        this.getData();
      } else {
        //扫码进直播间
        this.ewm = val.appletCode;
        this.dialogVisible = true;
      }
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
      this.getData(this.pageParams);
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 75%;
  margin: 0 auto;
  .breadcrumb {
    box-sizing: border-box;
    height: 84px;
    line-height: 84px;
    padding-left: 16px;
  }
  .content {
    text-align: center;
    // border: 1px solid #e8f2fd;
    padding: 20px;
    box-sizing: border-box;
    .header {
      .titel {
        font-size: 30px;
        font-weight: 600;
        color: #000;
      }
      p {
        text-align: left;
      }
      border: 1px solid #ccc;
      margin-bottom: 30px;
      padding: 30px;
      box-sizing: border-box;
    }

    .video {
      width: 100%;
      height: 448px;
      position: relative;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
      }
    }
    .more {
      text-align: left;
      margin-bottom: 40px;
      > .titel {
        font-size: 30px;
        font-weight: 600;
        color: #000;
        margin-bottom: 20px;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .item {
          width: 100%;
          position: relative;
          .bgimg {
            min-width: 100%;
            max-width: 15vw;
            // height: 255px;
            height: 13vw;
          }
          .playBtn {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 50%;
            top: 5vw;
            transform: translateX(-50%);
          }
          .info {
            height: 114px;
            position: relative;
            padding: 16px;
            box-sizing: border-box;
            .titel {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            .time {
              position: absolute;
              left: 16px;
              bottom: 24px;
            }
          }
        }
      }
    }
  }
}
</style>

